<template>
  <div>
    <!-- 列表 -->
    <pro-table
      ref="tableRef"
      :fetch="fetch"
      :columns="columns"
      :toolbar="toolbar"
      :operate="operate"
      :param="state.param"
      :pagination="pagination"
      :row-selection="{
        selectedRowKeys: state.selectedRowKeys,
        onChange: onSelectChange,
      }"
    >
    </pro-table>
    <upload :visible="state.visibleUpload" @close="closeUpload"></upload>
    <detail
      :visible="state.visibleDetail"
      @close="closeDetail"
      :record="state.recordData"
    ></detail>
    <!-- 编辑页面 -->
    <edit
      :visible="state.visibleEdit"
      @close="closeEdit"
      :record="state.recordData"
    ></edit>

    <page-footer></page-footer>
  </div>
</template>
<script>
import upload from "@/view/qianqi/modal/upload"; // 没有用到
import detail from "@/view/qianqi/modal/detail"; // 没有用到
import { reactive, ref } from "vue";
import { getList } from "@/api/module/constructionPreparation";
import edit from "@/view/shigong/modal/edit.vue";
export default {
  components: {
    upload,
    detail,
    edit,
  },
  setup() {
    const tableRef = ref();

    /// 预览
    const imageFormat = { width: 34 };

    /// 列配置
    const columns = [
      { dataIndex: "nr", key: "nr", title: "内容" },
      { dataIndex: "dz", key: "dz", title: "地址" },
      { dataIndex: "zrdw", key: "zrdw", title: "责任单位" },
      {
        dataIndex: "zt",
        key: "zt",
        title: "状态",
        conver: {
          0: "已完成",
          1: "实施中",
          2: "待实施",
          3: "无此项",
        },
      },
      { dataIndex: "zp", key: "zp", title: "照片", image: imageFormat },
      { dataIndex: "bz", key: "bz", title: "备注" },
    ];

    /// 数据来源 [模拟]
    const fetch = async () => {
      const res = await getList();
      // 处理图片
      res.data.forEach((item) => {
        item.zp = "data:image/png;base64," + item.zp;
      });
      return {
        total: 6, // 表格数据条数总条数
        data: res.data, // 表格数据
      };
    };

    /// 工具栏
    const toolbar = [];

    /// 行操作
    const operate = [
      {
        label: "编辑",
        event: function (record) {
          state.visibleEdit = true;
          state.recordData = record;
        },
      },
    ];

    /// 分页参数
    const pagination = {
      pageNum: 1,
      pageSize: 10,
    };

    /// 外置参数 - 当参数改变时, 重新触发 fetch 函数
    const state = reactive({
      param: {},
      selectedRowKeys: [],
      visibleUpload: false,
      visibleDetail: false,
      recordData: {},
    });

    /// 查询参数
    const searchParam = [
      { key: "name", type: "input", label: "名称" },
      { key: "code", type: "input", label: "描述" },
      {
        key: "state",
        type: "select",
        label: "状态",
        value: "0",
        hidden: true,
        options: [
          { text: "全部", value: "0" },
          { text: "开启", value: "1" },
          { text: "关闭", value: "2" },
        ],
      },
    ];

    const search = function (value) {
      state.param = value;
      tableRef.value.reload();
    };

    const onSelectChange = (selectedRowKeys) => {
      state.selectedRowKeys = selectedRowKeys;
    };
    /// 关闭修改
    const closeEdit = function () {
      state.visibleEdit = false;
      tableRef.value.reload();
    };
    const closeUpload = function () {
      state.visibleUpload = false;
      tableRef.value.reload();
    };

    const closeDetail = function () {
      state.visibleDetail = false;
      tableRef.value.reload();
    };
    return {
      state,
      fetch,
      search,
      toolbar,
      columns,
      operate,
      tableRef,
      pagination,
      searchParam,
      closeEdit,
      closeUpload,
      closeDetail,
      onSelectChange,
    };
  },
};
</script>
<style>
.ant-list-item-meta-description {
  line-height: 28px;
}
</style>
